<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
     
<!DOCTYPE html>
<html>
	<head>
		 <script src="${ctxWebStatic }/laydate/laydate.js"></script>
		<meta name="decorator" content="center_common" />
		
		<style type="text/css">
         em.error {
	height: 18px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
	margin-left: 20px;
	background: url("${ctxWebStatic}/images/error_img.png") no-repeat 0px
		0px;
	padding-left: 24px;
	color: #d3001e;
	font-size: 16px;
	font-family: "微软雅黑";
  }
 /*  em.hidden{
  	diplay:none;
  } */
</style>
			<script>
			function savePice(){
				/* $("#chooseBrand").find("i").each(function(){
					  if($(this).hasClass("supplem-checked")){
						
					}   
				}) */
				
				var checked = true
				$("#forms").find('input[name="partsCode"]').each(function(k,v){
				
					if($(v).val()==''){
						
						$("#forms").find('input[name="partsCode"]').eq(k).next().removeClass('hidden');
						checked=false;
					}else{
						$("#forms").find('input[name="partsCode"]').eq(k).next().addClass('hidden');
					}
				})
				
				
				
				
				
				
			
			 
				
				var stg=/^([1-9]\d{0,9})$/;
				$("#forms").find('input[name="num"]').each(function(k,v){
					console.log($(v).val())
					if($(v).val()==''){
					
						//$("#forms").find('input[name="num"]').eq(k).next().text('hidden');
						$("#forms").find('input[name="num"]').eq(k).next().text('请输入需要数量')
						$("#forms").find('input[name="num"]').eq(k).next().removeClass('hidden');
						checked=false;
					}else{
				    
						if(stg.test($(v).val())==true){
						
							$("#forms").find('input[name="num"]').eq(k).next().addClass('hidden');
						}else{
						  
							$(v).next().removeClass('hidden')
							$(v).next().text('数量格式错误')
						
						}
						
						
					}

				})
				
				var contacts=$("#contacts").val();
				if($.trim(contacts)!=null&&$.trim(contacts)!=""){
				  if($.trim(contacts).length<2){
					  checked=false
						$("#contacts").next("em").removeClass('hidden');
					    $("#contacts").next("em").text("请输入2-10个汉字");
				  }else{
					  
					  $("#contacts").next("em").addClass('hidden');
				  }
					
				}else{
					checked=false
					$("#contacts").next("em").removeClass('hidden');
					$("#contacts").next("em").text("请输入企业联系人！");
					
				}
				
				
				var pattern = /^1[34578]\d{9}$/;
				var phone=$("#phone").val();
			
				if($.trim(phone)!=null&&$.trim(phone)!=""){
				   console.log(pattern.test($.trim(phone)))
                   if(pattern.test($.trim(phone))==false){
                	   checked=false
                	   $("#phone").next("em").removeClass('hidden');
               	       $("#phone").next("em").text("请输入正确手机格式！");
                	   
                   }else{
                	   $("#phone").next("em").addClass('hidden');
                	   
                   }
				}else{
					checked=false
					$("#phone").next("em").removeClass('hidden');
					 $("#phone").next("em").text("请输入联系人电话号码！");
				}
				
				
				
				var oicq=$("#oicq").val();
				if($.trim(oicq)!=null&&$.trim(oicq)!=""){
					$("#oicq").next("em").addClass('hidden');
				}else{
					checked=false
					$("#oicq").next("em").removeClass('hidden');
				}
				
		
				if(checked==true){
					$("#forms").submit();
				}else{
				
					
					return checked;
					
				}
				
				
			}
			
			
			
			
			
		$(function(){
		/* 	$("#forms").find('input').blur(function(){
				$(this).next('em').addClass('hidden');
			}) */

			
			laydate.render({
				  elem: '#test1'
				});
			choose($(".chooseOne i"));
			
			function choose(obj){
				obj.click(function(){
					obj.removeClass("supplem-checked");
					$(this).addClass('supplem-check supplem-checked');
					var vv=$('.supplem-choose i').index($(this));		
					$(".numRadio").find('input').eq(vv).click();
				});
			}
			
			$("#chooseBrand").find("i").click(function(){
				
				if($(this).hasClass("supplem-checked")){
					$(this).removeClass("supplem-checked");
					var st=$("#chooseBrand").find("i").index($(this));
					 if(st==0){
						$("#quality").val("");
					}
					if(st==1){
						$("#quality1").val("");
					}
					if(st==2){
						$("#quality2").val("");
					}
					if(st==3){
						$("#quality3").val("");
					} 
				}else{
					var st=$("#chooseBrand").find("i").index($(this));
					$(this).addClass("supplem-checked");
					 if(st==0){
						$("#quality").val(1);
					}
					if(st==1){
						$("#quality1").val(2);
					}
					if(st==2){
						$("#quality2").val(3);
					}
					if(st==3){
						$("#quality3").val(4);
					} 
				}
			})
			
			
			/* 增加form表单 */
			var zhs=2;
			$('#addForm').click(function(){				
				var	clone=$('.addTpl').eq(0).clone(true);
				clone.prepend('<div style="width:100%;height:20px;padding-right:15px"><a href="javascript:void(0)" onclick="removeThis(this)" style="float:right;color:#F33">删除</a></div>')
				clone.find('.layui-input').attr("id","test"+zhs);

				clone.show();
				clone.find('input').blur(function(){
					$(this).next('em').addClass('hidden');
				})
				
				$(this).parents('.collect-form-box').find('.addBlock').last().after(clone);
				laydate.render({
			 	 elem: '#test'+zhs
				});
			
				zhs=zhs+1;
				
			})
			
			
			/* 增加form表单 */
//			$("#addForm").click(function(){
//				var formEle = $(".collect-form").eq(0).clone(true);
//				$(this).parent().before(formEle);
//			});

			/* 添加图片 */
			$(".uploadImgs").on("change",function(){
			//$(this).next().find('img').attr('src',$(this)[0].files[0])
				var _this = $(this);
				var file = $(this)[0].files[0];  
				var reader = new FileReader();
				reader.onload=function(e) {  
			        imgFile = e.target.result; 
			        var result = $('<li class="item-pic"><img src="'+imgFile+'" alt=""><a href="javascript:void(0)" onclick="deleteImg(this)">删除</a></li>')
			      	_this.parent().before(result);
			        _this.after('<input type="file" name="file" accept="image/*" class="uploadImgs" onchange="changeFile(this)">');
			        _this.hide();
			    };  
			   	reader.readAsDataURL(file);
			});
			laydate.render({
			  elem: '#test1'
			});
		})
		function changeFile(t){
			var _this = $(t);
			var file = $(t)[0].files[0];  
			var reader = new FileReader();
			reader.onload=function(e) {
		        imgFile = e.target.result; 
		        var result = $('<li class="item-pic"><img src="'+imgFile+'" alt=""><a href="javascript:void(0)" onclick="deleteImg(this)">删除</a></li>')
		      	_this.parent().before(result);
		        _this.after('<input type="file" name="file" accept="image/*" class="uploadImgs" onchange="changeFile(this)">');
		        _this.hide();
		    };
		   	reader.readAsDataURL(file);
		
		}
		
		
	
		function removeThis(e){
			$(e).parents('.addBlock').remove();
		}
		function deleteImg(e){
			var index=$(e).parents('.add-upload-pic').find('.item-pic').index($(e).parent());
			$(e).parents('.add-upload-pic').find('input').eq(index).remove();
			$(e).parent().remove();
			
		}
		$(function(){
			$("#checkTicket").find("input").click(function(){
				var st=$(this).index()+1;
				$("#whetherTicket").val(st);
			})
			
		})
		
	</script>
	</head>
	<body>
		<div class="collect-form col-sm-6 addBlock addTpl" style="display: none;">
	<div class="form-group clearfix">
		<label class="col-xs-4 input_info control-label">
			<i class="must_img"></i>
			配件信息：
		</label>
		<div class="col-xs-8 input_left">
			<input  class="form-control" placeholder="请输入配件编号" name="partsCode" maxlength="50" >
			<em class="error hidden">请输入配件编号</em>
		</div>
	</div>
	<div class="form-group clearfix">
		<label class="col-xs-4 input_info control-label">
			<i class="must_img"></i>
			需要数量：
		</label>
		<div class="col-xs-8 input_left">
			<input type="number" class="form-control" name="num" id="num" maxlength="9" >
			<em class="error hidden">请输入需要数量</em>
		</div>
	

	</div>
	<div class="form-group clearfix">
		<label class="col-xs-4 input_info control-label" >
		    
			期望到货时间：
		</label>
		<div class="col-xs-8 input_left">
			<input class="hy form-control layui-input" name="receiveTime" >
			
		</div>
	</div>
	<div class="form-group clearfix">
		<label class="col-xs-4 input_info control-label">
			备注：
		</label>
		<div class="col-xs-8 input_left">
			<textarea  class="form-control" name="remarks" maxlength="100"></textarea>
		</div>
	</div>
	<div class="form-group clearfix">
		<label class="col-xs-4 input_info control-label">
		    
			实物照片：
		</label>
		<div class="col-xs-8 input_left">
			<ul class="add-upload-pic clearfix">
				<%-- <li class="item-pic"><img src="${ctxWebStatic }/images/add-parts-pic.jpg" alt=""></li> --%>
				<li class="upload-btn">
					<input type="file" name="file" accept="image/*" class="uploadImgs">
				</li>
			</ul>
		</div>
	</div>
	</div>
	<form action="${ctxWeb}/enquire/sendPriceSave" method="post" enctype="multipart/form-data" id="forms">	
		<!--头部-->
					<!-- 左边部分 end-->
					<!-- 右边部分 -->
					<div class="col-sm-10 pad20 pad_10">
						<div class="Credit_right">
							<!--S 配件信息-->
							<div class="goods_detail_info_box mar_16 clearfix">
								<h3>
									<span>配件信息</span>
								</h3>
								<div class="parts-collect">
									<div class="collect-form-box clearfix">
										<!--S 配件信息表单 -->
										<!--E 配件信息表单 -->
										<!--S 配件信息表单 -->
									
										<div class="collect-form col-sm-6 addBlock">
											<br>
												<div class="form-group clearfix">
													<label class="col-xs-4 input_info control-label">
														<i class="must_img"></i>
														配件信息：
													</label>
													<div class="col-xs-8 input_left">
														<input type="text" class="form-control" placeholder="请输入配件编号" name="partsCode" maxlength="50">
														<em class="error hidden">请输入配件编号</em>
													</div>
												</div>
												<div class="form-group clearfix">
													<label class="col-xs-4 input_info control-label">
														<i class="must_img"></i>
														需要数量：
													</label>
													<div class="col-xs-8 input_left">
														<input type="text" class="form-control" name="num" maxlength="9" type="number">
														<em class="error hidden">请输入需要数量</em>
													</div>
												</div>
												<div class="form-group clearfix">
													<label class="col-xs-4 input_info control-label">
														期望到货时间：
													</label>
													<div class="col-xs-8 input_left">
														<input class="hy form-control layui-input" name="receiveTime" id="test1" >
													</div>
												</div>
												<div class="form-group clearfix">
													<label class="col-xs-4 input_info control-label">
														备注：
													</label>
													<div class="col-xs-8 input_left">
														<textarea class="form-control" name="remarks" maxlength="100"></textarea>
													</div>
												</div>
												<div class="form-group clearfix">
													<label class="col-xs-4 input_info control-label">
														实物照片：
													</label>
													<div class="col-xs-8 input_left">
														<ul class="add-upload-pic clearfix">
															<%-- <li class="item-pic"><img src="${ctxWebStatic }/images/add-parts-pic.jpg" alt=""></li> --%>
															<li class="upload-btn">
																<input type="file" name="file" accept="image/*" class="uploadImgs">
															</li>
														</ul>
													</div>
												</div>
											
										</div>
									
										<!--E 配件信息表单 -->
										<div class="add-collect-form col-sm-6">
											<a id="addForm" href="javascript:;"><em class="add-control"></em>新增配件</a>
										</div>
									</div>
									
								</div>
							</div>	
							<!--E 配件信息-->
							<!-- S 补充信息 -->
							<div class="goods_detail_info_box mar_16 clearfix">
								<h3>
									<span>补充信息</span>
								</h3>
								<div class="supplem-meg">
									<div class="supplem-box">
										<div class="supplem-choose clearfix chooseOne">
											<aside><em class="must_img"></em>需要发票：</aside>
											<span class="supplem-item">
												<i class=" supplem-check supplem-checked"></i>
												<em>需要</em>
											</span>
											<span class="supplem-item">
												<i class="supplem-check"></i>
												<em>不需要</em>
											</span>
											<input type="hidden" name="whetherTicket" value="1" id="whetherTicket">
											<div class="numRadio" style="display: none;" id="checkTicket">
												<input type="radio" name="need" value="需要" checked="cheked">
												<input type="radio" name="need" value="不需要">
											</div>
										</div>
										<div class="supplem-choose clearfix chooseTwo" id="chooseBrand">
											<aside>品质需求：</aside>
											<span class="supplem-item">
												<i class="supplem-check supplem-checked"></i>
												<input  name="quality"  id="quality" value="1" type="hidden" />
												<em>原厂</em>
											</span>
											<span class="supplem-item">
												<i class="supplem-check supplem-checked"></i>
												<input  name="quality"  id="quality1" type="hidden" value="2"/>
												<em>国内品牌</em>
											</span>
											<span class="supplem-item">
												<i class="supplem-check supplem-checked"></i>
												<input  name="quality"  id="quality2" type="hidden" value="3" />
												<em>国外品牌</em>
											</span>
											<span class="supplem-item">
												<i class="supplem-check supplem-checked"></i>
												<input  name="quality"  id="quality3" type="hidden"  va/>
												<em>其他</em>
											</span>
											<div  class="numRadio" style="display: none;" id="qualityChoose">
												<input type="checkbox" value="原厂" >
												<input type="checkbox"  value="国内品牌">
												<input type="checkbox"  value="国外品牌">
												<input type="checkbox"  value="其他">
											</div>
										</div>
									</div>
								</div>
							</div>
							
							<!-- E 补充信息 -->
							<!--S 联系方式 -->
							<div class="goods_detail_info_box mar_16 clearfix">
								<h3>
									<span>联系方式</span>
								</h3>
								<div class="company_msg clearfix">
									<div class="form-group clearfix">
									    <label for="firstname" class="col-sm-3 col-xs-4 input_info control-label">
									    	<i class="must_img"></i>
									    	联系人：
									    </label>
									    <div class="col-sm-9 col-xs-8 input_left">
									      	<input type="text" class="form-control" placeholder="请输入企业联系人" name="contacts" id="contacts" maxlength="10" >
									      	<em class="error hidden">请输入企业联系人</em>
									    </div>
									</div>
									<div class="form-group clearfix">
									    <label for="firstname" class="col-sm-3 col-xs-4 input_info control-label" >
									    	<i class="must_img"></i>
									    	电话号码：
									    </label>
									    <div class="col-sm-9 col-xs-8 input_left">
									      	<input type="tel" class="form-control" placeholder="请输入联系人电话号码" name= "phone" value="${phone}" id="phone">
									      	<em class="error hidden">请输入联系人电话号码</em>
									    </div>
									</div>
									<div class="form-group clearfix">
									    <label for="firstname" class="col-sm-3 col-xs-4 input_info control-label">
									    	<i class="must_img"></i>
									    	QQ号码：
									    </label>
									    <div class="col-sm-9 col-xs-8 input_left">
									      	<input type="text" class="form-control" placeholder="请输入联系人QQ号" name="oicq" id="oicq" maxlength="15">
									      	 <em class="error hidden">请输入联系人qq号码</em>
									    </div>
									</div>
								    
									<p class="register_btn mar_t30 col-sm-offset-3 col-xs-offset-4">
										<a href="javascript:void(0)" onclick="savePice()">提交询价</a>
									</p>
								</div>	
							</div>
							
							<!--E 联系方式 -->
						</div>
					</div>
					</form>
					
					<!-- 右边部分 end-->
			
	<!--主题内容-->
	<!--foot-->
	
	<!--foot结束-->
	</body>

</html>
